<template>
  <div>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <!-- 从0开始新建一个vuecli脚手架项目

本店收银系统采用vue开发, 冲这点, 你不来买点试试?

先看效果 - 无css(你想美化下, 你就写点哈哈)
提示: v-model="变量" 输入框的值会绑定给vue的这个变量(别忘了在data里先声明哦) -->
        <h2>欢迎光临_vue开发的收银系统—_水果店</h2>
        <table width="600" border="2">
          <thead></thead>
          <tr align="center">
            <!-- <th>编号</th> -->
            <!-- <th>姓名</th> -->
            <!-- <th>性别</th> -->
          </tr>
          <tr>
            <td align="center">
              <strong>苹果10￥/斤,折后&lt; 8折&gt;</strong>
            </td>
          </tr>
          <tr>
            <td align="center">
              请输入你要购买的斤数:<input type="text" v-model.number="appLe" />
            </td>
          </tr>
          <tr>
            <td align="center">
              <button @click.prevent="BUY">结账买单</button>
            </td>
          </tr>
          <tr>
            <td align="center">
              结账单:总价{{ appLe1 }}￥元 折后价{{ appLe2 }}￥元 省了{{
                appLe3
              }}￥元
            </td>
          </tr>
        </table>
      </body>
    </html>
  </div>
</template>

<script>
export default {
  data() {
    return {
      appLe: '',
      appLe1: '',
      appLe2: '',
      appLe3: '',
    }
  },
  //
  //
  methods: {
    BUY() {
      this.appLe1 = this.appLe * 10
      this.appLe2 = this.appLe * 8
      this.appLe3 = this.appLe1 - this.appLe2
    },
  },
}
</script>

<style></style>
